import "./ArticleAddForm.scss";
import {ReactComponent} from "../../class/ReactComponent";
import {AutoComplete, Form, Input, Select} from "antd";
import {FormComponentProps} from "antd/lib/form";
import React from "react";
import {TableArticleList} from "../../../common/class/TableArticleList";
import {downloadTypeList, typeList} from "../../../common/var/updateType";

export namespace ArticleAddForm {
    export interface Props extends ReactComponent.Props, FormComponentProps {
        initData: Partial<TableArticleList.Data>;
    }
    export interface State extends ReactComponent.State {
    }
}

export class ArticleAddForm extends ReactComponent<ArticleAddForm.Props, ArticleAddForm.State> {
    public render() {
        return (<Form className={this.getClsName("article-add-form-component")}>
            <Form.Item label="章节索引">{this.getIndexInput()}</Form.Item>
            <Form.Item label="章节名">{this.getNameInput()}</Form.Item>
            <Form.Item label="更新网址">{this.getURLInput()}</Form.Item>
            <Form.Item label="更新方法">{this.getMethodInput()}</Form.Item>
            <Form.Item label="本地/网络">{this.getLocalizedSelect()}</Form.Item>
        </Form>);
    }
    protected getNameInput() {
        let initialValue = "";
        if (this.props.initData) {
            initialValue = this.props.initData.name || "";
        }
        return this.props.form.getFieldDecorator("name", {
            rules: [
                {
                    required: true,
                    message: "请输入章节名",
                }
            ],
            initialValue,
            trigger: "onInput",
        })(<Input placeholder="请输入章节名"/>);
    }
    protected getIndexInput() {
        let initialValue = 0;
        if (this.props.initData) {
            initialValue = this.props.initData.article_index || 0;
        }
        return this.props.form.getFieldDecorator("article_index", {
            rules: [
                {
                    required: true,
                    message: "请输入章节索引",
                }
            ],
            initialValue,
            trigger: "onInput",
        })(<Input type="number" placeholder="请输入章节索引"/>);
    }
    protected getMethodInput() {
        let initialValue = "";
        if (this.props.initData) {
            initialValue = this.props.initData.download_method || "";
        }
        return this.props.form.getFieldDecorator("download_method", {
            initialValue,
        })(<AutoComplete>{this.getMethodOptionList()}</AutoComplete>);
    }
    protected getMethodOptionList() {
        return downloadTypeList.map((type) => {
            return (<AutoComplete.Option key={type}>{type}</AutoComplete.Option>);
        });
    }
    protected getURLInput() {
        let initialValue = "";
        if (this.props.initData) {
            initialValue = this.props.initData.origin_url || "";
        }
        return this.props.form.getFieldDecorator("origin_url", {
            initialValue,
            rules: [
                {
                    required: true,
                    message: "请输入更新网址",
                },
                {
                    validator(rule: any, value: any, callback: any) {
                        const reg = /^(akaba|https?):\/{2,3}(\w+)/;
                        if (reg.test(value)) {
                            callback();
                        } else {
                            callback("请输入正确的网址");
                        }
                    },
                }
            ],
        })(<Input placeholder="请输入更新网址"/>);
    }
    protected getLocalizedSelect() {
        let initialValue = 0;
        if (this.props.initData) {
            initialValue = this.props.initData.localized || 0;
        }
        return this.props.form.getFieldDecorator("localized", {
            initialValue,
        })(<Select>
            <Select.Option value={0}>网络</Select.Option>
            <Select.Option value={1}>本地</Select.Option>
        </Select>);
    }
}
